<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn {
            width: 50px;
            border: none;
            background-color: #ae00ff;
            color: #fff;
            height: 25px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
        }

        .btn:active {
            background-color: #8800ff;

        }

        .btn.action {
            background-color: #8800ff;
        }

        .btn:focus {
            outline: none;
        }

        .wrapper div {
            border: 1px solid #ae00ff;
            width: 157px;
            text-align: center;
            display: none;
        }

        .wrapper div.active {
            display: block;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <button class="btn action">1</button>
        <button class="btn">2</button>
        <button class="btn">3</button>
        <div class="content active">111</div>
        <div class="content">222</div>
        <div class="content">333</div>
    </div>


    <script type="text/javascript">

        var btn, div;
        btn = document.getElementsByTagName('button');
        div = document.getElementsByClassName('content');

        for (var i = 0; i < btn.length; i++) {
            (function (j) {
                btn[j].onclick = function () {
                    for (var i = 0; i < btn.length; i++) {
                        btn[i].className = "btn";
                        div[i].className = "content";
                    }
                    this.className += " action";
                    div[j].className += " active";
                }
            }(i))
        }


    </script>
</body>

</html>